<template>
  <div class="page flex-col">
    <div class="mod1 flex-col">
      <span class="word1"
        >©版权所有&nbsp;2021&nbsp;&nbsp;青海城海物联网技术有限公司&nbsp;&nbsp;|&nbsp;&nbsp;*ICP备********号</span
      >
    </div>
    <div class="mod2 flex-col">
      <div class="layer1 flex-col">
        <div class="outer1 flex-col">
          <span class="txt1">电力云系统</span>
        </div>
        <div class="outer2 flex-row">
          <img
            class="label1"
             src="@/assets/user.png"
          />
          <el-input
            v-model="loginForm.username"
            placeholder="请输入登录账号"
          ></el-input>
        </div>
        <div class="outer4 flex-row">
          <img
            class="label2"
               src="@/assets/pwd.png"
          />
          <el-input
            v-model="loginForm.password"
            show-password
            placeholder="请输入登录密码"
          ></el-input>
        </div>
        <button class="outer8 flex-col" @click="handleLogin">
          <span class="txt5">立即登录</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from 'js-md5'
import {login} from '@/api'
import {mapActions} from 'vuex'
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        verifyCode: "",
      },
    };
  },
  created(){
    // 清除本地缓存的store
    localStorage.removeItem("store")
    sessionStorage.removeItem("store")
  },
  methods: {
    ...mapActions({
				setLogin: 'setLogin'
    }),
    handleLogin() {
      if (this.loginForm.username == "") {
        this.$message.error("请填写用户账号");
        return false;
      }
      if (this.loginForm.password == "") {
        this.$message.error("请填写用户密码");
        return false;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const params = `?loginname=${this.loginForm.username}&password=${md5(this.loginForm.password)}`
      login(params).then(res => {
        loading.close()
        if(res.statusCode == 200) {
          const { data } = res
          if(data.info.headImg && data.info.headImg.indexOf('http') < 0) {
            data.info.headImg = $globalUrl + data.info.headImg
          }
          this.setLogin(data.info)
          sessionStorage.setItem("token", data.token);
          this.$router.push("/");
        } else {
          console.log(res.msg)
           this.$message.error(res.msg);
        }
      }).catch(err => {
        loading.close()
        console.log(err)
      })
      
    },
  },
};
</script>
<style scoped>
.page {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: rgba(27, 35, 45, 1);
  overflow: hidden;
  justify-content: flex-end;
  padding-bottom: 0;
}

.mod1 {
  z-index: 2;
  height: 100%;
  background: url(http://project.tingyun.work:32784/upload/picture/bg/bg.png)
    100% no-repeat;
  background-size: cover;
  width: 100%;
  justify-content: flex-end;
  padding-bottom: 40px;
  align-items: center;
}

.word1 {
  z-index: 33;
  width: 486px;
  height: 21px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  line-height: 21px;
  text-align: justify;
}

.mod2 {
  z-index: 3;
  height: 488px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  width: 430px;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.layer1 {
  z-index: auto;
  width: 430px;
  height: 450px;
}

.outer1 {
  z-index: 4;
  height: 131px;
  background: url("../../assets/login-bg.png")
    100% no-repeat;
  width: 430px;
  justify-content: center;
  align-items: center;
}

.txt1 {
  z-index: 9;
  width: 180px;
  /* height: 47px; */
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 36px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  /* line-height: 47px; */
  text-align: center;
  margin: 0px auto;
  padding: 40px 0;
}

.outer2 {
  z-index: auto;
  width: 306px;
  justify-content: space-between;
  margin: 66px 0 0 65px;
  position: relative;
}

.label1 {
  z-index: 14;
  width: 24px;
  height: 28px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.word2 {
  z-index: 11;
  width: 100%;
  display: block;
  overflow-wrap: break-word;
  color: rgba(88, 101, 118, 1);
  font-size: 14px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  text-align: left;
  margin-top: 4px;
  margin-left: 25px;
  line-height: 42px;
  border: none;
}
.word2:focus {
  border: none;
}
.outer3 {
  z-index: 10;
  width: 306px;
  height: 1px;
  background: #ccc;
  align-self: center;
  margin-top: 10px;
  display: none;
}

.outer4 {
  z-index: auto;
  width: 306px;
  justify-content: space-between;
  margin: 20px 0 0 67px;
  position: relative;
}

.label2 {
  z-index: 18;
  width: 19px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.txt2 {
  z-index: 12;
  width: 103px;
  height: 19px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(88, 101, 118, 1);
  font-size: 14px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  line-height: 19px;
  text-align: left;
  margin-top: 3px;
}


.outer6 {
  z-index: auto;
  width: 301px;
  height: 41px;
  margin: 21px 0 0 67px;
  position: relative;
}

.icon1 {
  z-index: 27;
  width: 20px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.txt3 {
  z-index: 13;
  width: 84px;
  height: 19px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(88, 101, 118, 1);
  font-size: 14px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  line-height: 19px;
  text-align: left;
  margin: 8px 0 0 25px;
}

.layer2 {
  z-index: 25;
  height: 40px;
  background-color: rgba(216, 216, 216, 1);
  margin-left: 16px;
  width: 116px;
  justify-content: center;
  align-items: center;
}

.txt4 {
  z-index: 26;
  width: 88px;
  height: 31px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 41, 92, 0.4);
  font-size: 24px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  line-height: 31px;
  text-align: justify;
}



.outer8 {
  z-index: 31;
  height: 47px;
  border-radius: 23.5px 23.5px 23.5px 23.5px;
  background-color: rgba(105, 172, 255, 1);
  align-self: center;
  margin-top: 36px;
  width: 305px;
  justify-content: center;
  align-items: center;
}

.txt5 {
  z-index: 32;
  width: 64px;
  height: 21px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: MicrosoftYaHei;
  white-space: nowrap;
  line-height: 21px;
  text-align: justify;
}
::v-deep .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  padding-left: 45px;
}
</style>
